<template>
  <div class="app-container">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Sport Medicine" name="SportMedicine" />
      <el-tab-pane label="Sport Science" name="SportScience" />
      <el-tab-pane label="Classification" name="Classification" />
      <el-tab-pane label="Medication" name="Medication" />
      <el-tab-pane label="Summary" name="tab5" />
    </el-tabs>

  <div class="poppperbg" v-if='popoVisible'></div>
      <el-popover
  popper-class='exportPopover'
  :title='activeName+"/"+"newCase"'
  v-model='popoVisible'
  >
  <div class="com">
   <alerts v-show='casePage.id&&activeName'   :query='casePage' />
  </div>
   <div class="btn-close t-center btm-btn-groups" >
 <el-button  type="success" size="small"  style="margin:10px;" @click="popoVisible=false">close</el-button>
   </div>
</el-popover>

    <!-- tab1 tab2 -->
    <div v-if="activeName == 'SportMedicine' || activeName == 'SportScience'" class="container-fluid">
      <div class="filter-container">
        <el-input v-model="listQuery.keyword" placeholder="Keyword" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
        <router-link :to="link" style="float: right;">
          <button type="button" class="el-button el-button--success"><span>New case</span></button>
        </router-link>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @sort-change="sort_change"
      >
        <el-table-column fixed="left" label="Case ID" width="120" prop="id" sortable="custom">
          <template slot-scope="scope">
           <router-link tag="a"   :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=${scope.row.typeCode}&target=blank`">
              {{ scope.row.idPrefix }}
            </router-link>
             <!-- <el-button type="text" @click="cliAlert"
               :data-row='JSON.stringify(scope.row)'
               >{{scope.row.idPrefix}}</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="Status" width="100" prop="status" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column :label="'Date \n Published'" width="120" align="center" prop="publisheDate" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.publisheDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="'Last Modified'" width="140" align="center" prop="lastMedified" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastMedified | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Category" min-width="180" prop="category" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.category }}
          </template>
        </el-table-column>
        <el-table-column label="Sport" min-width="100" prop="sportName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Athlete" min-width="100" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastName }} {{ scope.row.firstName }}
          </template>
        </el-table-column>
        <el-table-column label="中文姓名" min-width="100" prop="tc" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.tc }}
          </template>
        </el-table-column>
        <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.pic || '-' }}
          </template>
        </el-table-column>
        <el-table-column :label="'Review \n Session'" width="120" align="center" prop="reviewSession" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.reviewSession | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.shortReport || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
          </template>
        </el-table-column>
<!--        <el-table-column fixed="right" label="" width="60" :formatter="sportMedicineFormatLink">-->
<!--          <template slot-scope="scope">-->
<!--            <div style="text-align: center;">-->
<!--              <router-link tag="a"  :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=${scope.row.typeCode}&target=blank`">-->
<!--                <el-button type="text" size="small">-->
<!--                  <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                </el-button>-->
<!--              </router-link>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- tab3 -->
    <div v-if="activeName == 'Classification'" class="container-fluid">
      <div class="filter-container">
        <el-input v-model="listQuery.keyword" placeholder="Keyword" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
        <router-link  :to="link" style="float: right;">
          <button type="button" class="el-button el-button--success"><span>New case</span></button>
        </router-link>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @sort-change="sort_change"
      >
        <el-table-column fixed="left" label="Case ID" width="120" prop="id" sortable="custom">
          <template slot-scope="scope">
            <router-link tag="a"  :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=CLASSIFICATION&target=blank`">
              {{ scope.row.idPrefix }}
            </router-link>
          </template>
        </el-table-column>
<!--        <el-table-column label="Status" width="100" prop="status" sortable="custom">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.status }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column align="center" label="Date Create" width="120" prop="date" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.date | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Sport" min-width="100" prop="sportName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Athlete" min-width="100" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastName }} {{ scope.row.firstName }}
          </template>
        </el-table-column>
        <el-table-column label="中文姓名" min-width="100" prop="tcName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.tcName }}
          </template>
        </el-table-column>
        <el-table-column label="Sports Classes" min-width="100" prop="sportStatus" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportStatus || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Class Status" min-width="100" prop="sportClass" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportClass || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
          </template>
        </el-table-column>
<!--        <el-table-column fixed="right" label="" width="60">-->
<!--          <template slot-scope="scope">-->
<!--            <div style="text-align: center;">-->
<!--              <router-link tag="a"  :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=CLASSIFICATION&target=blank`">-->
<!--                <el-button type="text" size="small">-->
<!--                  <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                </el-button>-->
<!--              </router-link>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- tab4 -->
    <div v-if="activeName == 'Medication'" class="container-fluid">
      <div class="filter-container">
        <el-input v-model="listQuery.keyword" placeholder="Keyword" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
        <router-link v-if="userType.indexOf('ADMIN')>-1" :to="link" style="float: right;">
          <button type="button" class="el-button el-button--success"><span>New case</span></button>
        </router-link>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @sort-change="sort_change"
      >
        <el-table-column fixed="left" label="Case ID" width="120" prop="id" sortable="custom">
          <template slot-scope="scope">
            <router-link tag="a"  :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=${scope.row.typeCode}&target=blank`">
              {{scope.row.idPrefix}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Date Create" width="120" prop="createTime" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Category" min-width="120" prop="type" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="Sport" min-width="100" prop="sportName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Athlete" min-width="100" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastName }} {{ scope.row.firstName }}
          </template>
        </el-table-column>
        <el-table-column label="中文姓名" min-width="100" prop="tcName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.tcName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.pic || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.shortReport || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
          </template>
        </el-table-column>
<!--        <el-table-column fixed="right" label="" width="60">-->
<!--          <template slot-scope="scope">-->
<!--            <div style="text-align: center;">-->
<!--              <router-link tag="a"  :to="`/medical/newCase?page=${activeName}&id=${scope.row.id}&type=${scope.row.type}&target=blank`">-->
<!--                <el-button type="text" size="small">-->
<!--                  <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                </el-button>-->
<!--              </router-link>-->

<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- tab5 -->
    <div v-if="activeName == 'tab5'" class="container-fluid">
      <div class="filter-container">
        <el-date-picker
          v-model="listQuery.startDate"
          type="date"
          placeholder="Date Start"
          class="filter-item"
          format="dd-MM-yyyy"
          value-format="yyyy-MM-dd"
          style="width: 140px"
        />
        -
        <el-date-picker
          v-model="listQuery.endDate"
          type="date"
          placeholder="Date End"
          class="filter-item"
          format="dd-MM-yyyy"
          value-format="yyyy-MM-dd"
          style="width: 140px"
        />
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="listIndexs"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column v-for="(item, ii) in summaryList" :key="ii" :label="item[0]" align="center" :min-width="minWidth(ii, item[0])">
          <template slot-scope="scope">
            <div v-if="item[0] === ''"> {{ scope.row.name }}</div>
            <div v-else> {{ summaryList[ii][scope.row.key] }}</div>
          </template>
        </el-table-column>
        <!--        <el-table-column :label="'Chinese\nMedical'" align="center" min-width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column :label="'Doping\nControl'" align="center" min-width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column :label="'Doping\nRecord'" align="center" min-width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Fitness" align="center" min-width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column :label="'General \n Practitioner'" align="center" min-width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Nutrition" align="center" min-width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Ophthalmology" align="center" min-width="140">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Orthopedics" align="center" min-width="120">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Physiotherapy" align="center" min-width="140">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Podiatry" align="center" min-width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Prosthetics & Orthotics" align="center" min-width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Psychology" align="center" width="120">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Radiology" align="center" min-width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column :label="'Sports \n Science'" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column :label="'Wound \n Care'" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.$index }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!-- <el-table-column fixed="right" label="" width="100">
          <template>
            <div style="text-align: center;">

              <router-link :to="'/athletes/generalInformation'">
                <el-button type="text" size="small">
                  <img src="../../assets/images/look.svg" class="btn-icon">
                </el-button>
              </router-link>

            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

  </div>
</template>

<script>
    import store from '@/store'
    import { getInterList } from '@/api/home'
    import { getMedicalList, getMedicalSSList, getSummaryList } from '@/api/medical'
     import alerts from '@/views/medical/newCaseCompent'
    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        components:{
          alerts
        },
        data() {
            return {
                sportMedicineList: {
                },
                popoVisible:false,
                casePage:{},
                list: [],
                listQuery: {
                    page: 1,
                    limit: 25,
                    total: 0,
                    sorting: '',
                    column: '',
                    startDate: '',
                    endDate: ''
                },
                sportScienceList: {
                    list: [],
                    listQuery: {
                        page: 1,
                        limit: 25
                    }
                },
                listLoading: true,
                activeName: 'SportMedicine',
                link: '/medical/newCase',
                summaryList: [],
                listIndexs: [],
                minWindths: [],
                userType: store.getters.userType
            }
        },
        watch: {
            activeName(val) {
                this.$router.push(`${this.$route.path}?tab=${val}`)
            }
        },
        created() {
            const query = this.$route.query
            if (query.tab) {
                this.activeName = query.tab || 'SportMedicine'
            }
            this.fetchData()
        },
        methods: {
             cliAlert(e){
               var row = JSON.parse(e.currentTarget.dataset.row)
               this.popoVisible = true
               this.casePage = {
                 // "pageType": this.activeName,
                 page:this.activeName,
                 "id": Number(row.id),
                 type: row.typeCode,
                 }
             },
            fetchData() {
                const tabName = this.activeName
                this.listQuery.page = 1
                this.listQuery.total = 0
                this.listQuery.sorting = ''
                this.listQuery.column = ''
                if (this.$refs.table) this.$refs.table.clearSort()
                if (tabName === 'SportMedicine') {
                    this.link = '/medical/newCase?page=SportMedicine'
                    this.medicalList(this.listQuery.page, tabName)
                } else if (tabName === 'SportScience') {
                    this.link = '/medical/newCase?page=SportScience'
                    this.medicalList(this.listQuery.page, tabName)
                } else if (tabName === 'Classification') {
                    this.link = '/medical/newCase?page=Classification'
                    this.medicalList(this.listQuery.page, tabName)
                } else if (tabName === 'Medication') {
                    this.link = '/medical/newCase?page=Medication'
                    this.medicalList(this.listQuery.page, tabName)
                } else {
                    this.link = '/medical/newCase?page=SportMedicine'
                    this.getSummaryList()
                    // this.listLoading = false
                }
            },
            medicalList(page, tabName) {
                var that = this
                var url = '/medical/sport_medical/page_list'
                console.log(tabName)
                if (tabName === 'SportMedicine') url = '/medical/sport_medical/page_list'
                if (tabName === 'SportScience') url = '/medical/sport_science/page_list'
                if (tabName === 'Classification') url = '/medical/classification/page_list'
                if (tabName === 'Medication') url = '/medical/medication/page_list'
                this.listLoading = true
                if (page === 1) {
                    this.list = []
                }
                getMedicalList(url, {
                    keyword: this.listQuery.keyword,
                    page: page,
                    size: this.listQuery.limit,
                    sorting: this.listQuery.sorting,
                    column: this.listQuery.column
                }).then(response => {
                    if (response.status === 0) {
                        const data = response.result
                        this.listQuery.total = data.total ? data.total : this.listQuery.total
                        for (var i in data.list) {
                          data.list[i].idPrefix = this.$caseIdFormat(tabName, data.list[i].id)
                        }
                        this.list = data.list
                        this.listQuery.page = page
                    }
                    that.listLoading = false
                })
            },
            sort_change(column) {
                this.listQuery.page = 1
                if (column.prop && column.order) {
                    this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.listQuery.column = column.prop
                    this.medicalList(1, this.activeName)
                }
                // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
            },
            getSummaryList() {
                var that = this
                that.listLoading = true
                this.listIndexs = []
                getSummaryList({
                    start: this.listQuery.startDate,
                    end: this.listQuery.endDate
                }).then(response => {
                    if (response.status === 0) {
                        const data = response.result
                        // data[7][3] = 12
                        this.summaryList = data
                        for (var i in data[0]) {
                            if (i > 0) {
                                this.listIndexs.push({ name: data[0][i].replace(' ', '\n'), key: i })
                            }
                        }
                    }
                    that.listLoading = false
                })
            },
            minWidth(i, text) {
                let w = 100
                if (text.length >= 10) {
                     w = 130
                } else if (text.length < 5 && text !== '') {
                     w = 50
                } else {
                     w = 100
                }
                // const w = text.length >= 10 ? 130 : 100
                console.log(text, text.length)
                return w
            },
            // pageSize变化事件
            handleSizeChange(val) {
              this.listQuery.limit = val
              this.fetchData()
            },
            // pageNum变化事件
            handleCurrentChange(page) {
                this.medicalList(page, this.activeName)
            },
            sportMedicineFormatLink(row, column) {
                return row.row.id = 1
            },
            forthSet(dateStr, pattern = '') {
                // 根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)
                //   yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDate().toString().padStart(2, '0')
                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours().toString().padStart(2, '0')
                    var mm = dt.getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            },
            handleClick(tab, event) {
                this.listLoading = true
                this.fetchData()
                this.listQuery.keyword = ''
            },
            handleFilter() {
                this.fetchData()
            }
        }
    }
</script>
<style lang="scss">
  .el-table__header .cell {
      white-space: pre-line;
    }
  .exportPopover{

      .el-message-box__content{
    width:100%;height:85vh;overflow-y: auto;overflow-x:hidden;
      }
      .el-message-box{
        width:90vw;
      }
  }

</style>
